<%--
  Created by IntelliJ IDEA.
  User: 孤焰
  Date: 2021/6/3
  Time: 20:00
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>类别列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/layui/css/layui.css"  media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm open-all">全部展开</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm close-all">全部关闭</button>
                </div>
                <div class="layui-card-body">
                    <table class="layui-table layui-form" id="category-list" lay-size="sm"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript" src="${pageContext.request.contextPath}/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/axios.min.js"></script>

<script type="text/javascript">layui.config({
    base: '${pageContext.request.contextPath}/layuiadmin/'
}).extend({
    treeTable: 'modules/treeTable'
}).use(['treeTable','layer','code','form'],function(){
    var o = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    var treeTable = layui.treeTable;
    // 直接下载后url: './data/table-tree.json',这个配置可能看不到数据，改为data:[],获取自己的实际链接返回json数组

    axios.get('${pageContext.request.contextPath}/category/categoryTreeList').then(function (res) {
        var dataTest = res.data;

        var	re = treeTable.render({
            id: 'categoryList',
            elem: '#category-list',
            data: dataTest,
            icon_key: 'title',
            end: function(e){
                form.render();
            },
            cols: [
                {
                    key: 'title',
                    title: '名称',
                    width: '100px'
                },
                {
                    key: 'sortOrder',
                    title: '编号排序',
                    width: '100px',
                    align: 'center',
                },
                {
                    title: '状态',
                    width: '100px',
                    align: 'center',
                    template: function (item) {
                        if (item.status == 1) {
                            return '正常';
                        } else {
                            return '<a style="color: red">已废弃</a>';
                        }
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    template: function(item){
                        return '<button class="layui-btn layui-btn-primary layui-btn-sm get-checked" lay-filter="add">添加</button>' +
                            '<button class="layui-btn layui-btn-primary layui-btn-sm get-checked"  lay-filter="update">编辑</button>' +
                            '<button class="layui-btn layui-btn-primary layui-btn-sm get-checked" lay-filter="del">删除</button>';
                    }
                }
            ]
        });

        // 监听增加按钮
        treeTable.on('tree(add)',function(data){
            layer.open({
                type: 2,
                title: '类别增加',
                shadeClose: false,
                shade: 0,
                area: ['60%', '90%'],
                content: '${pageContext.request.contextPath}/category/categoryAdd?iframe=true', //iframe的url
                success: function(layero, index) {
                    var body=layer.getChildFrame('body',index);
                    body.contents().find("#parentId").val(data.item.id);
                    body.contents().find("#pname").val(data.item.title);
                }
            });
        });

        // 监听编辑按钮
        treeTable.on('tree(update)',function(data){
            layer.open({
                type: 2,
                title: '类别编辑',
                shadeClose: false,
                shade: 0,
                area: ['60%', '90%'],
                content: '${pageContext.request.contextPath}/category/categoryUpdate?id='+data.item.id //iframe的url
            });
        });

        // 监听删除按钮
        treeTable.on('tree(del)',function(data){
            layer.confirm('你确认删除吗?', {title:'提示'}, function(index){
                var queryStr = 'id='+data.item.id;
                axios.post('${pageContext.request.contextPath}/category/delCategory', queryStr).then(function (res) {
                    if (res.data.code != 200) {
                        layer.msg('数据库遇到未知错误，删除失败', {icon: 5});
                    } else {
                        layer.msg('数据删除成功', {icon: 6});
                        setTimeout(function () {
                            location.reload();
                        }, 500);

                    }
                });

                layer.close(index);
            });
        });

        // 全部展开
        o('.open-all').click(function(){
            treeTable.openAll(re);
        });
        // 全部关闭
        o('.close-all').click(function(){
            treeTable.closeAll(re);
        });
    });

})
</script>
</html>
